<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <p>name: {{name}}</p>
            <p>
                <p>真实年龄: {{age.realAge}}</p>
                <p>对外年龄：{{age.openAge}}</p>
            </p>
            <p>上班条件：{{flag}}</p>
            <p><button @click="age.realAge=21">改变真实年龄</button></p>
            <p><button @click="age.openAge=39">改变对外年龄</button></p>
        </div>
        <script>
            Vue.config.productionTip = false
            new Vue({
                el:'#demo',
                data: {
                    name:'袁春艳',
                    age:{
                        realAge:32,
                        openAge:17.5
                    },
                    flag:''
                },
                watch:{
                    // "age.realAge":{
                    //     immediate:true,
                    //     handler(value){
                    //         this.flag = value <=30 ? '上班' : '当老板'
                    //     }
                    // },
                    // "age.openAge":{
                    //     handler(value){
                    //         console.log(value)
                    //     }
                    // }
                    age:{
                        // 深度监视，深层的属性变化，都会触发handler的执行
                        deep:true,
                        handler(value){
                            console.log(value)
                        }
                    }
                }
            })
        </script>
    </body>
</html>